<template>
  <div v-loading="pagelistLoading">
    <div class="bgf">
      <el-button
        style="margin-bottom: 0.1rem"
        icon="el-icon-plus"
        size="small"
        type="primary"
        @click="uploadAction()"
        >上传版本</el-button
      >
      <el-button
        style="margin-bottom: 0.1rem"
        size="small"
        type="text"
        @click="upListAction()"
        >上传记录</el-button
      >
      <MyTable :show-total="false" :column="equipColumn" :data="equlist" />
    </div>
    <div class="bgf">
      <el-button
        style="margin-bottom: 0.1rem"
        icon="el-icon-plus"
        size="small"
        type="primary"
        @click="onAddAction()"
        >添加设备</el-button
      >
      <MyTable
        :row-class="{ RowName: 'orgstatus', RowValue: 9 }"
        :column="column"
        :data="list"
        :page-sizes="[10, 20, 30, 40, 50]"
        :current-page.sync="totalParams.PageIndex"
        :total="total"
        :page-size="totalParams.PageSize"
        pagination
        layout="total,sizes,prev,pager,next,jumper"
        @size-change="changePagination"
        @p-current-change="changecurrent"
      />
    </div>
    <DrawerForm
      ref="drawerform"
      v-model="params"
      :drawer-visible="drawerVisible"
      :config="fromConfigdetale"
      @update:drawerVisible="drawerVisible = $event"
      @submit="submitHandle"
    />
    <el-dialog
      title="添加设备"
      :visible.sync="dialogVisible"
      width="500"
      :before-close="handleClose"
    >
      <div class="tc">
        <h3>将设备序号与入网编号告知安装设备人员即可</h3>
        <span>（入网编号有效期为24小时，请在有效期完成添加）</span>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="100px"
          style="width: 50%; margin: auto; padding-top: 0.2rem"
          class="demo-ruleForm"
        >
          <el-form-item
            label="设备序号："
            prop="equserno"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input v-model="ruleForm.equserno" />
          </el-form-item>
          <el-form-item label="入网编号：">
            <p class="tl">{{ ruleForm.equnetno }}</p>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      :visible.sync="upDialogVis"
      :with-header="false"
      size="600px"
      :before-close="closeUpDrawer"
    >
      <p class="drawertitle">上传记录</p>
      <div class="tbboxs">
        <div ref="ApkLog" class="tableBox">
          <div v-for="(item, index) in ApkLogList" :key="index" class="content">
            <p class="conTiele">上传日期：2020年11月02日 13时22分45秒</p>
            <div class="tableHeader">
              <p>序号</p>
              <p>版本号</p>
              <p>APK名称</p>
              <p>服务器地址</p>
            </div>
            <div class="tableCloumn">
              <p class="tableItem">{{ index + 1 }}</p>
              <p class="tableItem">{{ item.sysversion }}</p>
              <p class="tableItem">{{ item.sysapkname }}</p>
              <p class="tableItem">{{ item.sysserviceip }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div v-else class="tc">
        暂无上传记录
      </div> -->
      <div class="form-box">
        <div class="buttom">
          <el-button type="primary" @click="closeUpDrawer">关闭</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import DrawerForm from "@/components/MyForm/drawerForm";
import { column, fromConfigdetale, equipColumn } from "../column/equipment.js";
import page from "@/mixins/page";
export default {
  components: {
    DrawerForm,
  },
  filters: {},
  mixins: [page],
  data() {
    return {
      fromConfigdetale: fromConfigdetale(this),
      subdis: false, // 控制按钮loading
      title: "", // 新建/修改弹框 title
      drawerVisible: false,
      queryParams: {},
      params: {
        version: null,
        filename: null,
      },
      column: column(this),
      equipColumn: equipColumn(this),
      list: [],
      httpUrl: "QueryEquListByPaged",
      dialogVisible: false,
      ruleForm: {
        equserno: null,
        equnetno: null,
      },
      equlist: [],
      upList: [],
      ApkLogList: [],
      apkParams: {
        PageIndex: 1,
        PageSize: 8,
        total: 0,
      },
      upDialogVis: false,
      dom: null,
    };
  },
  created() {
    this.getEquList();
  },
  methods: {
    // 查询
    changeHandle() {
      this.searchHandle();
    },
    closeUpDrawer() {
      this.upDialogVis = false;
    },
    // 添加
    uploadAction() {
      this.subdis = false;
      this.title = "添加";
      this.params = {
        version: null,
        filename: null,
      };
      this.drawerVisible = true;
    },
    setScrollDom() {
      let scrollTop = this.dom.scrollTop;
      let windowHeight = this.dom.clientHeight || this.dom.clientHeight;
      let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight;
      if (scrollTop + windowHeight === scrollHeight) {
        this.apkParams.PageIndex = this.apkParams.PageIndex + 1;
        // 计算总页数
        const pageCum = Math.ceil(
          this.apkParams.total / this.apkParams.PageSize
        );
        if (this.apkParams.PageIndex <= pageCum) {
          this.api.GetApkLog(this.apkParams).then((res) => {
            this.ApkLogList = this.ApkLogList.concat(
              this.ApkLogList,
              res.items
            );
          });
        }
      }
    },
    upListAction() {
      this.upDialogVis = true;

      this.apkParams.PageIndex = 1;
      this.api.GetApkLog(this.apkParams).then((res) => {
        this.ApkLogList = res.items;
        this.apkParams.total = 24;
        this.dom = this.$refs.ApkLog;
        this.dom.removeEventListener("scroll", this.setScrollDom);
        this.dom.addEventListener("scroll", this.setScrollDom);
      });
    },
    onAddAction() {
      this.api.CreateEquNo({}).then((res) => {
        this.ruleForm = res;
      });
      this.dialogVisible = true;
    },
    submitDialog() {
      this.api.InsertEqu(this.ruleForm).then((res) => {
        this.$message({ type: "success", message: `操作成功` });
        this.dialogVisible = false;
        this.searchHandle();
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    resetHandle() {
      this.queryParams.dptId = "0";
      this.queryParams.AreaId = "0";
      this.searchHandle();
    },
    submitHandle() {
      this.api
        .InsertApkInfo(this.params)
        .then((res) => {
          this.$message({ type: "success", message: `操作成功` });
          this.drawerVisible = false;
          this.getEquList();
        })
        .finally((r) => {
          this.$refs.drawerform.setsubmitLoading(false);
        });
    },
    // 修改
    async updateAction(val) {
      this.subdis = false;
      this.title = "修改";
      this.drawerVisible = true;
      const params = val;
      this.params = { ...params };
    },
    // 禁用/启用
    EnabledAction(val) {
      this.$confirm(
        "删除后设备将解除与陵园的绑定，确认删除设备？",
        "删除设备",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        this.api.DeleteEqu({ id: val.equid }).then((res) => {
          this.$message({ type: "success", message: `操作成功` });
          this.searchHandle();
        });
      });
    },
    passAction(val) {
      this.$confirm(
        "确认将当前版本 V1.0.0推送至设备进行版本更新？",
        "版本更新",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        this.api.ResetPasswordOrg({ id: val.equid }).then((res) => {
          this.$message({ type: "success", message: `操作成功` });
          this.searchHandle();
        });
      });
    },
    getEquList() {
      this.api.GetApkNewInfo({}).then((res) => {
        if (res) {
          this.equlist = [res];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tbboxs {
  position: relative;
  padding: 0.2rem;
  height: 100%;
  box-sizing: border-box;
}
.tableBox {
  position: absolute;
  right: 0;
  left: 0.2rem;
  top: 0;
  bottom: 1.9rem;
  overflow-y: auto;
  .content {
    border-bottom: 1px solid #dadada;
    margin-bottom: 0.5rem;
    .conTiele {
      padding-bottom: 0.15rem;
      font-size: 0.14rem;
      font-weight: bold;
      color: #333333;
    }
    .tableHeader {
      height: 0.4rem;
      line-height: 0.4rem;
      background: #f1f1f1;
      font-size: 0.14rem;
      font-weight: bold;
      color: #333333;
      p {
        display: inline-block;
        width: 25%;
        padding: 0 0 0 0.3rem;
        box-sizing: border-box;
      }
    }
    .tableCloumn {
      font-size: 0.14rem;
      font-weight: 400;
      color: #333333;
      .tableItem {
        display: inline-block;
        width: 25%;
        word-break: break-all;
        padding: 0.12rem 0 0.12rem 0.3rem;
        box-sizing: border-box;
        vertical-align: middle;
      }
    }
  }
}
</style>
